<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div = document.getElementById("box");
//得到了外部样式
/*var style = window.getComputedStyle(div, null);
console.log(style.width);
console.log(style.height);
console.log(style.backgroundColor);*/

/*var style = div.currentStyle;
console.log(style.width);
console.log(style.height);
console.log(style.backgroundColor)*/

console.log(getStyle(div, "width"));

// 获取外部和内部 css 属性的兼容写法
function getStyle(ele, attr){
    if (window.getComputedStyle){
        return window.getComputedStyle(ele, null)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}

</script>
</body>
</html>
<!--
    作者：李振超  2017年7月31日16:25
    css 的脚本化:用 js 去操作 css 样式
    
    获取行内样式:
        div.style.width
        div.style["width"]
    
    获取内部样式和外部样式:
        ie 678:
            对象.currentStyle
        其他浏览器, ie9+:
            window.getComputedStyle
    
    
-->